<template>
  <div class="administrator">
    <div class="tip">
      <div class="common">
        <div class="common-input">
          <el-input
            v-model="commonValue"
            placeholder="请输入内容"
            clearable
          ></el-input>
        </div>

        <div class="common-input">
          <el-select v-model="commonStatusValue" placeholder="请选择" clearable>
            <el-option
              v-for="item in commonStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="common-button" @click="searchHit">搜索</div>
        <div class="common-button" @click="replacementHit">重置</div>
      </div>
      <div class="common-add" @click="addHit">新增</div>
    </div>

    <div class="table" v-loading="loading">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{
          color: '#333333',
          backgroundColor: '#f3f3f3',
        }"
      >
        <el-table-column prop="managerId" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="managerName" label="账户"> </el-table-column>
        <!-- <el-table-column prop="managerRoleId" label="角色ID"> </el-table-column> -->
        <el-table-column prop="managerRoleName" label="角色"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" type="info">停用</el-tag>
            <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="280">
          <template slot-scope="scope">
            <div class="operation">
              <div class="list" @click.prevent="editHit(scope.row)">编辑</div>

              <div class="list" @click.prevent="deteleHit(scope.row)">删除</div>

              <div class="list" @click.prevent="prohibitionHit(scope.row)">
                {{ scope.row.status == 1 ? "禁用" : "启用" }}
              </div>

              <div class="list" @click.prevent="resetHit(scope.row)">
                重置密码
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="tableDataTotal"
          :current-page="page"
        >
        </el-pagination>
      </div>
    </div>

    <!--新增弹出框-->
    <div class="add">
      <el-dialog
        :title="addRoaid == 0 ? '新增' : '编辑'"
        :visible.sync="addVisible"
        :before-close="addClose"
        width="30%"
      >
        <div class="add-form">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="80px"
            class="demo-ruleForm"
          >
            <el-form-item label="账户" prop="account">
              <el-input
                v-model="ruleForm.account"
                placeholder="请输入账户"
                clearable
              ></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input
                v-model="ruleForm.password"
                placeholder="请输入密码"
                clearable
              ></el-input>
            </el-form-item>

            <el-form-item label="选择角色" prop="roleType">
              <el-select v-model="ruleForm.roleType" placeholder="请选择">
                <el-option
                  v-for="item in ruleForm.roleOptions"
                  :key="item.managerRoleId"
                  :label="item.managerRoleName"
                  :value="item.managerRoleId"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item class="attachment">
              <div class="list" @click="addClose">取消</div>
              <div class="list" @click="addConfirm('ruleForm')">保存</div>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <!--删除弹出框-->
    <div class="delete">
      <el-dialog
        title="删除"
        :visible.sync="deleteVisible"
        :before-close="deleteClose"
      >
        <div class="delete-title">是否确认删除该管理员？</div>
        <div class="delete-attachment">
          <div class="list" @click="deleteClose">取消</div>
          <div class="list" @click="deleteConfirm">确定</div>
        </div>
      </el-dialog>
    </div>

    <!--提示弹出框-->
    <div class="delete">
      <el-dialog
        title="提示"
        :visible.sync="warningVisible"
        :before-close="warningClose"
      >
        <div class="delete-title">是否更改状态？</div>
        <div class="delete-attachment">
          <div class="list" @click="warningClose">取消</div>
          <div class="list" @click="warningConfirm">确定</div>
        </div>
      </el-dialog>
    </div>

    <!--重置密码弹出框-->
    <div class="delete">
      <el-dialog
        title="重置密码"
        :visible.sync="resetVisible"
        :before-close="resetClose"
      >
        <div class="delete-title">
          是否确认重置密码？ <br />
          <span>重置密码为：123456</span>
        </div>
        <div class="delete-attachment">
          <div class="list" @click="resetClose">取消</div>
          <div class="list" @click="resetConfirm">确定</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  systemManagerList,
  systemRoleList,
  systemManagerListAdd,
  systemManagerListForbid,
  systemManagerListDelete,
} from "@/api/system";

import { md5 } from "@/utils/md5";

export default {
  data() {
    return {
      commonValue: "",
      commonStatusOptions: [
        {
          value: "0",
          label: "禁用",
        },
        {
          value: "1",
          label: "正常",
        },
      ],
      commonStatusValue: "",
      //-------------
      page: 1,
      limit: 10,
      tableData: [],
      tableDataTotal: 0,
      addRoaid: 0,
      addVisible: false,
      //----------
      managerObj: {},
      commonObj: {},
      ruleForm: {
        account: "",
        password: "",
        roleType: "",
        roleOptions: [],
      },
      rules: {
        account: [{ required: true, message: "请输入账户", trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        roleType: [{ required: true, message: "请选择", trigger: "blur" }],
      },

      deleteVisible: false,
      warningVisible: false,
      resetVisible: false,
      //----------------------动态
      loading: false,
    };
  },
  created() {
    this.loading = true;
    this.systemManagerListMet();
  },
  methods: {
    systemManagerListMet() {
      let params = {
        managerName: this.commonValue,
        status: this.commonStatusValue,
        pageSize: this.limit,
        pageNo: this.page,
      };

      systemManagerList(params).then((res) => {
        if (res.errorCode == null) {
          this.tableData = res.resultData.managerList;
          this.tableDataTotal = res.resultData.totalNum;
          this.loading = false;
        }
      });
    },
    searchHit() {
      this.loading = true;
      this.page = 1;
      this.systemManagerListMet();
    },
    replacementHit() {
      this.commonValue = "";
      this.commonStatusValue = "";
      this.loading = true;
      this.page = 1;
      this.systemManagerListMet();
    },
    //------------------------
    addHit() {
      this.managerObj = {};
      this.ruleForm.account = "";
      this.ruleForm.password = "";
      this.ruleForm.roleType = "";

      this.addRoaid = 0;
      this.systemRoleListMet();
    },
    editHit(item) {
      this.managerObj = item;
      this.ruleForm.account = item.managerName;
      this.ruleForm.roleType = item.managerRoleId;

      this.addRoaid = 1;
      this.systemRoleListMet();
    },
    addClose() {
      this.ruleForm.account = "";
      this.ruleForm.password = "";
      this.ruleForm.roleType = "";
      this.ruleForm.roleOptions = [];

      this.addVisible = false;
    },
    addConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            managerId: this.addRoaid == 0 ? "" : this.managerObj.managerId,
            managerName: this.ruleForm.account,
            managerPassword: md5(this.ruleForm.password),
            managerRoleId: this.ruleForm.roleType,
          };

          systemManagerListAdd(params).then((res) => {
            if (res.errorCode == null) {
              if (this.addRoaid == 0) {
                this.$message.success("新增管理员成功！");
              } else {
                this.$message.success("编辑管理员成功！");
              }

              this.loading = true;
              this.systemManagerListMet();
              this.addVisible = false;
            }
          });
        } else {
          return false;
        }
      });
    },

    systemRoleListMet() {
      let params = {};

      systemRoleList(params).then((res) => {
        if (res.errorCode == null) {
          this.ruleForm.roleOptions = res.resultData;
          this.addVisible = true;
        }
      });
    },

    //------------

    //-------
    deteleHit(item) {
      this.commonObj = item;
      this.deleteVisible = true;
    },
    deleteClose() {
      this.deleteVisible = false;
    },
    deleteConfirm() {
      let params = this.commonObj.managerId;

      systemManagerListDelete(params).then((res) => {
        if (res.errorCode == null) {
          this.deleteVisible = false;
          this.$message.success("删除成功！");
          this.loading = true;
          this.systemManagerListMet();
        }
      });
    },
    //---------
    prohibitionHit(item) {
      this.commonObj = item;
      this.warningVisible = true;
    },

    warningClose() {
      this.warningVisible = false;
    },
    warningConfirm() {
      let params = this.commonObj.managerId;

      systemManagerListForbid(params).then((res) => {
        if (res.errorCode == null) {
          this.warningVisible = false;
          this.$message.success("状态更换成功！");
          this.loading = true;
          this.systemManagerListMet();
        }
      });
    },

    //--------------
    resetHit(item) {
      this.commonObj = item;
      this.resetVisible = true;
    },
    resetClose() {
      this.resetVisible = false;
    },
    resetConfirm() {
      let params = {
        managerId: this.commonObj.managerId,
        managerName: this.commonObj.managerName,
        managerPassword: md5("123456"),
        managerRoleId: this.commonObj.managerRoleId,
      };

      systemManagerListAdd(params).then((res) => {
        if (res.errorCode == null) {
          this.$message.success("密码重置成功！");
          this.loading = true;
          this.systemManagerListMet();
          this.resetVisible = false;
        }
      });
    },
    //---------
    handleSizeChange(val) {
      this.limit = val;
      this.loading = true;
      this.systemManagerListMet();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.loading = true;
      this.systemManagerListMet();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/css/delete.less");

.administrator {
  .common {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    .common-input {
      margin-right: 10px;
      /deep/ .el-input {
        width: 250px;
      }
    }

    .common-input:last-child {
      margin-right: 0;
    }

    .common-button {
      padding: 9px 20px;
      box-sizing: border-box;
      border-radius: 5px;
      background: #2a82e4;
      font-size: 14px;
      color: #fff;
      margin-left: 20px;
      cursor: pointer;
    }

    .common-button:last-child {
      background: #999999;
    }
  }

  .common-add {
    padding: 9px 20px;
    box-sizing: border-box;
    border-radius: 5px;
    background: #2a82e4;
    font-size: 14px;
    color: #fff;
    margin-left: 20px;
    cursor: pointer;
  }

  .table {
    cursor: pointer;

    .operation {
      display: flex;
      align-items: center;
      color: #2a82e4;

      .list {
        margin-right: 20px;
        cursor: pointer;
      }
    }

    .pagination {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 60px;
      box-sizing: border-box;

      /deep/ .el-pagination.is-background .el-pager li {
        border: 1px solid #f4f4f5;
      }

      /deep/ .el-pager li {
        border: 1px solid #f4f4f5;
      }

      /deep/ .el-pagination.is-background .btn-prev {
        border: 1px solid #f4f4f5;
      }
    }
  }

  .add {
    /deep/ .el-dialog__header {
      font-size: 16px;
      text-align: center;
    }

    /deep/ .el-dialog__body {
      padding-bottom: 10px;
    }

    .add-form {
      /deep/ .el-select {
        width: 100%;
      }

      .attachment {
        margin-top: 50px;
        /deep/ .el-form-item {
          margin-bottom: 0;
        }

        /deep/ .el-form-item__content {
          margin-left: 0 !important;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .list {
          background: #3da8f5;
          color: #fff;
          font-size: 16px;
          margin-right: 50px;
          border-radius: 5px;
          width: 100px;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        .list:first-child {
          background: #808080;
        }

        .list:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>